<template>
	<view class="page_box">
		<view class="head_box ">
			<yy-custom bgColor="bg-gradual-blue" v-if="0">
				<block slot="backText">返回</block>
				<block slot="content">导航栏</block>
			</yy-custom>
		</view>

		<view class="content_box ">
			<!--previousMargin='50rpx' nextMargin='50rpx' -->
			<Xsuu-swiper :swiperItems="swiperItems"></Xsuu-swiper>
			<view class="tab flex flex-wrap padding">
				<view class="flex flex-direction align-center ww33 padding-xs" v-for="(item, index) in data" :key="index" @click="to(item.url)">
					<image :src="item.icon" mode="" class="w90 h90 round "></image>
					<text class="f24 text-black mt8">{{ item.name }}</text>
				</view>
			</view>
			<view class="w690 h90 bgimg bg-img" @click="to('/pages/hmPage/certification')"></view>
			<view class="expert padding flex justify-between align-center">
				<view class="flex align-center">
					<text class="w4 h30 bg-orange block"></text>
					<text class="f32 text-bold margin-left">专家</text>
				</view>
				<view class="f24 text-gray flex align-center " @click="$t.to('/pages/hmPage/expertLib')">
					<text>查看更多</text>
					<span class="cuIcon-right ml20"></span>
				</view>
			</view>

			<view class="padding-lr padding-bottom-xs flex scroll">
				<view class="flex flex-direction margin-right radius " v-for="(item, index) in dataa" :key="index">
					<image :src="item.icon" mode="aspectFill" class="w250 h320 bg-gray r20"></image>
					<text class="f28 mt10">{{ item.name }}</text>
				</view>
			</view>
			<view class="expert padding   flex justify-between align-center">
				<view class="flex align-center">
					<text class="w4 h30 bg-orange block"></text>
					<text class="f32 text-bold margin-left">机构</text>
				</view>
				<view class="f24 text-gray " @click="$t.to('/pages/hmPage/institutionalLib')">
					<text>查看更多</text>
					<span class="cuIcon-right ml20"></span>
				</view>
			</view>
			<view class="padding-lr padding-bottom flex  flex-wrap justify-between radius">
				<view class="flex flex-direction mb20 " v-for="(item, index) in dataaa" :key="index">
					<image :src="item.icon" mode="aspectFill" class="w334 h334 bg-gray r20"></image>
					<text class="f28 mt20">{{item.name}}</text>
				</view>
			</view>
			<view class="expert padding   flex justify-between align-center">
				<view class="flex align-center">
					<text class="w4 h30 bg-orange block"></text>
					<text class="f32 text-bold margin-left">课程推荐</text>
				</view>
				<view class="f24 text-gray " @click="$t.to('/pages/hmPage/crse')">
					<text>查看更多</text>
					<span class="cuIcon-right ml20"></span>
				</view>
			</view>
			<view class="padding">
				<block v-for="(item,index) in 5" :key="index">
					<view class="padding bg-white r20 mb20 ">
						<view class="flex justify-between">
							<view class="flex">
								<image src="https://placeholder.idcd.com/?w=152&h=152&text=image&bgcolor=%236c757d&fontcolor=%23d3d3d3&fontsize=32&fontfamily=4" mode="aspectFill" class="w152 h152 bg-white r10"></image>
								<view class="flex flex-direction ml30">
									<text class="text-bold text-black f30 ">舞蹈课程</text>
									<text class="f26 text-gray mt27">机    构：舞蹈培训机构</text>
									<view class="flex f26 text-gray mt27">
										<text class="wap">上课时间: </text>
										<view class="flex flex-direction ml10">
											<text class="wap">春季14:00-18:00</text>
											<text class="f26 text-gray mt27 wap">秋季14:00-16:00</text>
										</view>
									</view>
									
								</view>
							</view>
							<button class="cu-btn btn" @click="$t.to('/pages/hmPage/danceMjr')">立即报名</button>
						</view>
						<text class="f24 text-gray mt27 block">截止时间：5月15日00:00-5月16日00:00</text>
					</view>
				</block>
			</view>
		</view>
		<view class="foot_box"></view>
		<!-- 登录提示 -->
		<yy-login v-if="false"></yy-login>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import XsuuSwiper from '../../components/Xss-swiper/Xsuu-swiper.vue';
export default {
	components: { XsuuSwiper },
	data() {
		return {
			dataa: [
				{ name: '刘雯雯', icon: '../../static/tab/tab5.png' },
				{ name: '张月', icon: '../../static/tab/tab6.png' },
				{ name: '李浩', icon: '../../static/tab/tab5.png' },
				{ name: '刘雯雯', icon: '../../static/tab/tab5.png' },
				{ name: '张月', icon: '../../static/tab/tab6.png' },
			],
			dataaa: [
				{ name: '川艺联盟教育机构', icon: '../../static/tab/tab1.png' },
				{ name: '川艺联盟教育机构', icon: '../../static/tab/tab2.png' },
				{ name: '川艺联盟教育机构', icon: '../../static/tab/tab3.png' },
				{ name: '川艺联盟教育机构', icon: '../../static/tab/tab4.png' },
			],
			data: [
				// {
				// 	name: '人才库',
				// 	icon: '../../static/icon4.png',
				// },
				{
					name: '专家库',
					icon: '../../static/icon2.png',
					url: '/pages/hmPage/expertLib',
				},
				{
					name: '机构库',
					icon: '../../static/icon6.png',
					url: '/pages/hmPage/institutionalLib',
				},
				{
					name: '人才认证',
					icon: '../../static/icon3.png',
					url: '/pages/hmPage/hmReg',
				},
				{
					name: '专家认证',
					icon: '../../static/icon1.png',
					url: '/pages/hmPage/expert',
				},
				{
					name: '查询人才/专家',
					icon: '../../static/icon5.png',
					url:'/pages/hmPage/talentQuery'
				},
			],
			swiperItems: [
				{
					img:
						'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn11%2F440%2Fw744h496%2F20181030%2F97c2-hnaivxq7344712.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619914829&t=52a970d21d4898c8e7ca21b8b5aa9312',
					title: '鲤程新能源',
					Subtitle: '心鲤程，心鲤想！',
					tip: '限时',
					url: '111',
				},
				{
					img:
						'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fs1.xchuxing.com%2Fxchuxing%2Fforum%2F201607%2F27%2F185524zj7wog6qizk9o90k.jpg&refer=http%3A%2F%2Fs1.xchuxing.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619914861&t=4c64a4a5cec709f9d03507b793546646',
					title: '包月低至9.9元',
					Subtitle: '立享受充电礼包！',
					tip: '推荐',
					url: '111',
				},
			],
		};
	},
	onShow() {},
	onLoad(e) {},
	methods: {
		to(url) {
			uni.navigateTo({
				url,
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.page_box {
	background-color: #FAFAFC;
	.head_box {
	}
	.content_box {
		.bgimg {
			margin: 0 auto;
			background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/%E6%9C%BA%E6%9E%84%E5%91%98%E5%B7%A5%E4%BF%A1%E6%81%AF%E8%AE%A4%E8%AF%81@2x.png);
		}
		.scroll {
			overflow-x: scroll;
		}
		.wap {
			white-space: nowrap;
		}
		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 138rpx;
			height: 54rpx;
			background: #F07203;
			border-radius: 10rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			white-space: nowrap;
		}
	}
}
</style>
